$(function(){
    let focus = $(".focus");
    let magnifier = $(".magnifier");
    let bigImg = $(".magnifier img");
    let smallImg = $(".productLeftImg");
    let lis = $(".productLeftBottom li");
    smallImg.on("mouseover",function(){
        focus.show();
        magnifier.show();
    });
    smallImg.on("mouseout",function(){
        focus.hide();
        magnifier.hide();
    });
    smallImg.on("mousemove",function(e){
        // 鼠标坐标:e.clientX,
        // 焦点的左外边距:$(".container")[0].offsetLeft,
        // 焦点元素宽度的一半parseInt($(".focus").css("width"))
        // 鼠标维持在焦点中心
        let x = e.clientX - smallImg.offset().left - 
        parseInt(focus.width()) / 2;
        let y = e.clientY - smallImg.offset().top - 
        parseInt(focus.height()) / 2;
        // 边界检测
        if(x < 0){
            x = 0;
        }
        if(x > 224){
            x = 224;
        }
        if(y < 0){
            y = 0;
        }
        if(y > 224){
            y = 224;
        }
        focus.css({left:x,top:y})
        bigImg.css({
            left : -(parseInt($(this).width()) / parseInt(focus.width())) * x,
            top : -(parseInt($(this).height()) / parseInt(focus.height())) * y
        })
    })
    var img_list = [
        {
            small: "https://res.vmallres.com/pimages//product/6941487228010/800_800_911790908A5E48C2C791D0DAD8ACE400EAEB121C1B6D9005mp.png",
            big: "https://res.vmallres.com/pimages//product/6941487228010/800_800_911790908A5E48C2C791D0DAD8ACE400EAEB121C1B6D9005mp.png",
        },
        {
            small: "https://res.vmallres.com/pimages//product/6941487228010/group//800_800_8587A1BFF7816B133C5F01886E85AB8746E5844D20918922.png",
            big: "https://res.vmallres.com/pimages//product/6941487228010/group//800_800_8587A1BFF7816B133C5F01886E85AB8746E5844D20918922.png",
        },
    ];
  
    let $dataArr = [{
        imgs : {
            0 : "https://res.vmallres.com/pimages//product/6941487228010/800_800_911790908A5E48C2C791D0DAD8ACE400EAEB121C1B6D9005mp.png",
            1 : "https://res.vmallres.com/pimages//product/6941487228010/group//800_800_8587A1BFF7816B133C5F01886E85AB8746E5844D20918922.png"
        },
        price : 2499.00,
        title : "【新品】HUAWEI MatePad 11 平板电脑 6+64GB Wi-Fi 曜石灰 120Hz高刷全面屏 HarmonyOS 2全新生产力 4大振幅扬声器+哈曼卡顿调音",
        commodityCode : 2701010045801,
        color1 :{img : "https://res.vmallres.com/pimages//product/6941487228010/40_40_911790908A5E48C2C791D0DAD8ACE400EAEB121C1B6D9005mp.png",
                text :   "耀石灰"} ,
        color2 :{img : "https://res.vmallres.com/pimages//product/6941487228027/40_40_C76DF474BA3F79309EE917B2EB7EE300C733B0B7E4E6A293mp.png",
                text :   "冰霜银"} , 
        color3 :{img : "https://res.vmallres.com/pimages//product/6941487228058/40_40_B21A7AAC0C7AEE634A42889179E9D13A984695427B179F65mp.png",
                text :   "海岛蓝"} ,  
        selectVersion1 : {
            text : "WiFi 6GB+64GB"
        } ,
        selectVersion2 : {
            text : "WiFi 6GB+128GB"
        } ,
        selectVersion3 : {
            text : "WiFi 6GB+256GB"
        }
    },{
        imgs : {
            0 : "https://res.vmallres.com/pimages//product/6941487214921/800_800_C4485747EE3754402EA680C69C29E4F55592AC2500DDE756mp.png",
            1 : "https://res.vmallres.com/pimages//product/6941487214921/group//800_800_E2B4B14BC11AD431288044257B7D08DCAED24DF6F97773CB.png"
        },
        price : 2599.00,
        title : "【新品 活力款】HUAWEI WATCH 3 46mm eSIM独立通话智能手表 心脏与呼吸健康管理 3天强劲续航 体温检测 NFC支付 黑色氟橡胶表带",
        commodityCode : 2901010033401,
        color1 :{img : "https://res.vmallres.com/pimages//product/6941487214921/40_40_C4485747EE3754402EA680C69C29E4F55592AC2500DDE756mp.png",
                text :   "活力款 黑色氟橡胶表带"} ,
        color2 :{img : "https://res.vmallres.com/pimages//product/6941487214907/40_40_B15032FAE2970A83E34979D1270B58CBD3D9217B68C4A467mp.png",
                text :   "时尚款 棕色真皮表带"} , 
        color3 :{img : "https://res.vmallres.com/pimages//product/6941487220649/40_40_2323A9901250711271333D0A473B241167DB6C074AFD85A8mp.png",
                text :   "时尚款 灰蓝尼龙表带"} ,  
        selectVersion1 : {
            text : "WiFi 6GB+64GB"
        } ,
        selectVersion2 : {
            text : "WiFi 6GB+128GB"
        } ,
        selectVersion3 : {
            text : "WiFi 6GB+256GB"
        }
    },{
        imgs : {
            0 : "https://res.vmallres.com/pimages//product/6941487220250/800_800_D28CC51EC805CB214A82D8400350FC170333443F334A3213mp.png",
            1 : "https://res.vmallres.com/pimages//product/6941487220250/group//800_800_EEF4034FFB545D033477A401FFD6C323E86C7BA328158ED2.png"
        },
        price : 4599.00,
        title : "HUAWEI Mate 40E 5G 全网通 8GB+128GB（亮黑色）",
        commodityCode : 2601010263901,
        color1 :{img : "https://res.vmallres.com/pimages//product/6941487220250/40_40_D28CC51EC805CB214A82D8400350FC170333443F334A3213mp.png",
                text :   "亮黑色"} ,
        color2 :{img : "https://res.vmallres.com/pimages//product/6941487220267/40_40_DEBB356E00934B123CDAE9CACBD70E1536224850853CCCE8mp.png",
                text :   "釉白色"} , 
        color3 :{img : "https://res.vmallres.com/pimages//product/6941487220274/40_40_2C8F152DCD7C4EC91348F14D5D7B8FC89EF1CA4BA298A57Fmp.png",
                text :   "秘银色"} ,  
        selectVersion1 : {
            text : "5G全网通 8GB+64GB"
        } ,
        selectVersion2 : {
            text : "5G全网通 8GB+128GB"
        } ,
        selectVersion3 : {
            text : "5G全网通 8GB+256GB"
        }
    },{
        imgs : {
            0 : "https://res.vmallres.com/pimages//product/6941487230181/800_800_719F2619030DDB74B032AD225F4AD80F0E2C83069289A88Emp.png",
            1 : "https://res.vmallres.com/pimages//product/6941487230181/group//800_800_F9FC5E1E3AD7EB72611DE701EF0E491F1FBDB294C6087620.png"
        },
        price : 3699.00,
        title : "HUAWEI nova 8 Pro 8GB+128GB 4G 全网通版（绮境森林）",
        commodityCode : 2601010281704,
        color1 :{img : "https://res.vmallres.com/pimages//product/6941487230150/40_40_714B54BC82C8DEB07BC951F2C5BE0052BE47AFA3058C2CBAmp.png",
                text :   "亮黑色"} ,
        color2 :{img : "https://res.vmallres.com/pimages//product/6941487230167/40_40_E6C3750D9E54F8AF37E982601AD27A3F89963279FB4E8B2Dmp.png",
                text :   "普罗旺斯"} , 
        color3 :{img : "https://res.vmallres.com/pimages//product/6941487230174/40_40_24C8988FAF38705E4C6A043CBEFB615EDED93AAA86A1F19Fmp.png",
                text :   "8号色"} ,  
        selectVersion1 : {
            text : "4G全网通 8GB+64GB"
        } ,
        selectVersion2 : {
            text : "4G全网通 8GB+128GB"
        } ,
        selectVersion3 : {
            text : "4G全网通 8GB+256GB"
        }
    }]
    let $Id = window.location.href.substr(window.location.href.indexOf("?")+1);
    $(".productLeftBottomImg1 img").attr("src", $dataArr[$Id].imgs[0])
    $(".productLeftBottomImg2 img").attr("src", $dataArr[$Id].imgs[1])
    $(".productLeftImg img").attr("src", $dataArr[$Id].imgs[0]);
    $(".productDescribe").html($dataArr[$Id].title);
    $(".commodityCodeRight").html($dataArr[$Id].commodityCode);
    $(".productInfoPriceRight").html("￥"+$dataArr[$Id].price);
    $(".chooseColorRightImg1 img").attr("src",$dataArr[$Id].color1.img);
    $(".chooseColorRightImg2 img").attr("src",$dataArr[$Id].color2.img);
    $(".chooseColorRightImg3 img").attr("src",$dataArr[$Id].color3.img);
    $(".chooseColorRightText1").html($dataArr[$Id].color1.text);
    $(".chooseColorRightText2").html($dataArr[$Id].color2.text);
    $(".chooseColorRightText3").html($dataArr[$Id].color3.text);
    $(".selectVersionRight1").html($dataArr[$Id].selectVersion1.text);
    $(".selectVersionRight2").html($dataArr[$Id].selectVersion2.text);
    $(".selectVersionRight3").html($dataArr[$Id].selectVersion3.text);
    var small_img_pic = $(".productLeftImg img");
    lis.click(function () {
        // 获取点击下标
        var index = $(this).index();
        // 修改小图路径
        // small_img_pic[0].src = img_list[index].small;
        small_img_pic[0].src = $dataArr[$Id].imgs[index];
        // 修改大图路径
        bigImg[0].src = $dataArr[$Id].imgs[index];
        $(this).css("border","1px solid #ca141d").siblings().css({border: "none"});
        
    });
})